<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI </title>
<link rel="stylesheet" type="text/css" href="css/hui.css" />
<style type="text/css">
#total{width:50%; height:54px; line-height:54px; color:#F0302F; text-align:center; position:fixed; font-size:18px; left:0px; bottom:0px; z-index:22;}
#addToCard{width:50%; height:54px; line-height:54px; background:#F0302F; color:#FFFFFF; text-align:center; position:fixed; right:0px; bottom:0px; z-index:22;}
.red{color:#C61523 !important;}

.hui-number-box{border:1px solid #D1D1D1; height:28px; float:left; border-radius:2px; -webkit-border-radius:2px;}
.hui-number-box input{float:left; height:28px; line-height:28px; padding:0px 5px; text-align:center; background:#FFFFFF; width:30px; border:0px; font-size:14px;}
.hui-number-box .reduce{float:left; height:28px; line-height:28px; width:28px; text-align:center; background: #F9F9F9; font-size:28px;}
.hui-number-box .add{float:left; height:28px; line-height:28px; width:28px; text-align:center; background: #F9F9F9; font-size:22px;}
.hui-header{background: red;}
.removeItem{float:right; padding:0px 10px; line-height:28px; color:#999999; font-size:14px;}
</style>
</head>
<body style="background:#F4F5F6;">
<header class="hui-header">
    <div id="hui-back"></div>
    <h1>购物车</h1>
</header>
<div class="hui-wrap">
    <div class="hui-media-list"style="padding:18px 5px;">
        <ul id="MainList"></ul>
    </div>
</div>
<div style="height:60px;">&nbsp;</div>
<div id="hui-footer">
    <div id="total"></div>
    <div id="addToCard" onclick="hui.open('payfo.html')">
        结算
    </div>
</div>
<script type="text/javascript" src="js/hui.js" charset="UTF-8"></script>
<script type="text/javascript">
var numRes = {};
hui.immersedStatusbar();
hui.plusReady(function(){
    var shoppingCart = hui.getItem('shoppingCart');
    if(shoppingCart == null || shoppingCart == '[]'){
        countPrice();
        hui.toast('购物车为空！');
        return ;
    }
    shoppingCart = JSON.parse(shoppingCart);
    var goodsIds = new Array();
    for(var i = 0; i < shoppingCart.length; i++){
        goodsIds.push(shoppingCart[i].pid);
        var kName = 'num'+shoppingCart[i].pid;
        eval('numRes.'+kName+' = shoppingCart['+i+'].num;')
    }
    getProduct(goodsIds);
});
function getProduct(goodsIds){
    hui.postJSON(
        'http://shop.hcoder.net/myApi.php',
        {act:"goodsInCart", ids : goodsIds.join(',')},
        function(res){
            for(var i = 0; i < res.msg.length; i++){
                var li = document.createElement('li');
                li.setAttribute('price', res.msg[i].shop_price+'');
                li.setAttribute('id', 'li'+res.msg[i].goods_id);
                var kName = 'num'+res.msg[i].goods_id;
                eval('var numberHere = numRes.'+kName+';')
                li.innerHTML = '<div class="hui-media-list-img"><a href="javascript:showInfo(\''+res.msg[i].goods_id+'\');"><img src="http://shop.hcoder.net/'+res.msg[i].goods_thumb+'" /></a></div>'+
                    '<div class="hui-media-content">'+
                        '<h1>['+res.msg[i].goods_id+'] '+res.msg[i].goods_name+'</h1>'+
                        '<p>￥'+res.msg[i].shop_price+'</p>'+
                        '<div style="padding:8px 0px;">'+
                            '<div class="hui-number-box" min="1" max="9999">'+
                                '<div class="reduce">-</div>'+
                                '<input type="number" value="'+numberHere+'" disabled="disabled" onchange="changCart('+res.msg[i].goods_id+', this.value);" />'+
                                '<div class="add">+</div>'+
                            '</div>'+
                            '<div class="removeItem" onclick="removeItem('+res.msg[i].goods_id+');">删除</div>'+
                        '</div>'+
                    '</div>';
                hui(li).appendTo('#MainList');
            }
            hui.numberBox();
            countPrice();
        }
    );
}
//删除商品
function removeItem(pid){
    hui.confirm('确定要删除吗？', ['取消', '确定'], function(){
        var shoppingCart = hui.getItem('shoppingCart');
        shoppingCart = JSON.parse(shoppingCart);
        for(var i = 0; i < shoppingCart.length; i++){
            if(pid == shoppingCart[i].pid){
                shoppingCart.splice(i, 1);
                huiJsonLog(shoppingCart);
                hui('#li'+pid).remove();
            }
        }
        hui.setItem('shoppingCart', JSON.stringify(shoppingCart));
        countPrice();
    });
}
function changCart(pid, num){
    var shoppingCart = hui.getItem('shoppingCart');
    shoppingCart = JSON.parse(shoppingCart);
    for(var i = 0; i < shoppingCart.length; i++){
        if(pid == shoppingCart[i].pid){
            shoppingCart[i].num = num;
        }
    }
    hui.setItem('shoppingCart', JSON.stringify(shoppingCart));
    countPrice();
}
//计算总价
function countPrice(){
    var total = 0, cartNum = 0;
    hui('#MainList').find('li').each(function(obj){
        var li = hui(obj);
        var price = li.attr('price');
        var num   = li.find('input').val();
        cartNum++;
        total += price * num;
    });
    hui('#total').html('总计：￥'+total);
    var index = plus.webview.getLaunchWebview();
    if(cartNum > 0){
        index.evalJS('hui("#cart").pointMsg('+cartNum+');');
    }else{
        index.evalJS('hui("#cart").removePointMsg();');
    }
}
</script>
</body>
</html>